<div class="container">
    <div [hidden]="submitted">
        <h1>学生信息表单</h1>
        <form (ngSubmit)="onSubmit()" #siteForm="ngForm">
            {{diagnostic}}
            <div class="form-group">
                <label for="name">学生名称：</label>
                <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name"
                       #name="ngModel"/>
                <div [hidden]="name.valid || name.pristine" class="alert alert-danger">学生名称是必需的</div>
            </div>
            <div class="form-group">
                <label for="sex">性别：</label>
                <select class="form-control" id="sex" required [(ngModel)]="model.sex" name="sex" >
                    <option *ngFor="let s of sex" [value]="s">{{s}}</option>
                </select>
            </div>
            <div class="form-group">
                <label for="age">年龄：</label>
                <input type="text" class="form-control" id="age" [(ngModel)]="model.age" name="age" />
            </div>
            <button type="submit" class="btn btn-default" [disabled]="!siteForm.form.valid">提交</button>
            <button type="button" class="btn btn-default" (click)="newSite()" >新增学生信息</button>
        </form>
    </div>
    <div [hidden]="!submitted">
        <h2>学生信息</h2>
        <div class="row">
            <div class="col-xs-3">学生名称：</div>
            <div class="col-xs-9 pull-left">{{model.name}}</div>
        </div>
        <div class="row">
            <div class="col-xs-3">性别：</div>
            <div class="col-xs-9 pull-left">{{model.sex}}</div>
        </div>
        <div class="row">
            <div class="col-xs-3">年龄：</div>
            <div class="col-xs-9 pull-left">{{model.age}}</div>
        </div>
        <button class="btn btn-default" (click)="submitted=false">编辑</button>
    </div>
</div>